<template>
  <view class="page">
    <movable-area class="page-scroll">
      <movable-view :x="x" :y="y" direction="all" inertia class="icons" @tap="add()">
        <uni-icons type="plus-filled" size="50" color="#ED7467"></uni-icons>
      </movable-view>
      <scroll-view class="scroll-y" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="" refresher-background="#f2f2f2" @refresherrefresh="onRefresh" @scrolltolower="scrolltolower" :lower-threshold="50">
        <template v-for="(item,index) in list">
          <uni-card :key="index" :title="item.costFee" :is-shadow="true" note="true">
            <view class="insureStartDay">内容：{{item.costContent}}</view>
            <view class="insureStartDay">备注：{{item.remark}}</view>
            <view class="insureContent">
              日期：{{item.costDate}}
            </view>
            <template v-slot:footer>
              <view class="footer">
                <view @tap="edit(item)">编辑</view>
                <view @tap="del(index,item)">删除</view>
              </view>
            </template>
          </uni-card>
        </template>
        <view v-if="list.length===0" class="noData">暂无数据</view>
        <view class="more">
          <uni-load-more v-if="list.length<total" status="loading" :contentText="{contentrefresh: ' 正在努力加载中...'}"></uni-load-more>
        </view>
      </scroll-view>
    </movable-area>
  </view>

</template>
<script>
let id = null
let formDate = {
  page: 1,
  size: 10,
}
export default {
  data() {
    return {
      x: 500,
      y: 300,
      triggered: false,
      loading: false,
      list: [],
      total: 0,
    }
  },
  onLoad(e) {
    id = e.id
  },
  onShow() {
    this.onRefresh()
  },
  methods: {
    add() {
      uni.navigateTo({
        url: `/pages/CRM/info/item5/add?id=${id}`
      });
    },
    edit(row) {
      uni.setStorage({
        key: 'row_key',
        data: row,
        success: function () {
          uni.navigateTo({
            url: `/pages/CRM/info/item5/add?id=${id}`
          });
        }
      });

    },
    del(index, row) {
      const _this = this
      uni.showModal({
        title: '警告',
        content: '本次操作将要该保单',
        success: function (res) {
          if (res.confirm) {
            _this.$post('/sale/wx/business_customer_cost/delete_data', { id: row.id }, true).then(res => {
              if (res.code * 1 === 200) {
                _this.list.splice(index, 1)
                _this.total--
                uni.showToast({
                  icon: "none",
                  title: "删除成功",
                  position: "bottom"
                })
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    getDatas() {
      const _this = this
      _this.$post('/sale/wx/business_customer_cost/get_datas', { ...formDate, customerId: id }, false).then(res => {
        if (res.code * 1 === 200) {
          if (formDate.page === 1) {
            _this.list = res.data.row
          } else {
            _this.list = [..._this.list, ...res.data.row]
          }
          _this.total = res.data.total
          if (_this.list.length === _this.total) {
            _this.loading = true
          } else {
            _this.loading = false
          }
          _this.triggered = false;
        } else {
          formDate.page--
        }
      }).catch(() => {
        _this.triggered = false;
        _this.loading = false
      })
    },
    /**自定义下拉刷新被触发*/
    onRefresh() {
      let _this = this
      _this.triggered = true;
      formDate.page = 1
      _this.getDatas()
    },
    scrolltolower() {
      let _this = this
      if (_this.loading) return;
      _this.loading = true
      formDate.page++
      _this.getDatas()
    },
  }
}
</script>
<style lang="scss" scoped>
.insureStartDay {
  color: #808080;
  padding-bottom: 10px;
}
.insureContent {
  text-align: right;
  font-size: 12px;
}
.footer {
  display: flex;
  > view {
    flex: 1;
    text-align: center;
    color: #96968e;
  }
}
.page {
  background: #f2f2f2;
}
.page-scroll {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .icons {
    width: 50px;
    height: 50px;
    z-index: 9999;
  }
}
.scroll-y {
  height: 100%;
}
.footer-box {
  color: #96968e;
}
</style>